<template>
  <div class="list___tree">
    <div class="node__header">
      <span class="label">事件名称</span>
      <p class="node__actions">
        <span class="node__id">事件ID</span>
        <span class="node__btns">操作</span>
      </p>
    </div>
     <el-tree ref="treeTable"  :data="list" node-key="button_id"  :show-checkbox="true">
      <div class="node__item" slot-scope="{ node, data }">
        <div class="label">{{ data.button_name  }}</div>
        <div class="node__actions">
          <div class="node__id">{{  data.button_id }}</div>
          <div class="node__btns">
            <el-button @click.stop="edit(data)" type="primary" size="mini" class="node__btn btn__edit" icon="el-icon-edit" circle></el-button>
            <el-button @click.stop="add(data)" type="primary" size="mini" class="node__btn" icon="el-icon-circle-plus" circle></el-button>
          </div>
        </div>
      </div>
     </el-tree>
  </div>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: () => [] },
    nodes: { type: Array, default: () => [] }
  },
  methods: {
    edit (data) {
      this.$emit('change', {
        type: 'edit',
        title: '编辑事件',
        button_id: data.button_id,
        button_name: data.button_name,
        parent_id: data.parent_id
      })
    },
    add (data) {
      this.$emit('change', {
        type: 'add-sub',
        title: '添加子节点',
        parent_id: data.button_id
      })
    },
    selectAll () {
      const checkedKeys = this.$refs.treeTable.getCheckedKeys()
      const keys = this.nodes.map(item => item.button_id)
      const isAllChecked = checkedKeys.length === keys.length

      if (isAllChecked) {
        this.$refs.treeTable.setCheckedKeys([])
        return
      }
      this.$refs.treeTable.setCheckedKeys(keys)
      const diff = keys.filter(item => !checkedKeys.includes(item))
      this.$refs.treeTable.setCheckedKeys(diff)
    },
    revertAll () {
      const checkedKeys = this.$refs.treeTable.getCheckedKeys()
      const keys = this.nodes.map(item => item.button_id)
      const diff = keys.filter(item => !checkedKeys.includes(item))
      diff.forEach(item => {
        this.$refs.treeTable.setChecked(item, true, false)
      })
      checkedKeys.forEach(item => {
        this.$refs.treeTable.setChecked(item, false, false)
      })
    },
    getCheckedKeys () {
      return this.$refs.treeTable.getCheckedKeys()
    }
  }
}
</script>

<style lang="scss" scoped>
$cell-height: 42px;
.list___tree {
  margin: 20px 0 0 0;
  // max-height: 800px;
  overflow: auto;
  /deep/ .el-tree-node__content {
    height: $cell-height;
    padding: 0 0;
    border: 1px solid #e5e5e5;
    border-bottom: 0;
  }
  /deep/ .el-tree {
    border-bottom: 1px solid #e5e5e5;
  }
  /deep/ .el-tree__empty-block {
    border: 1px solid #e5e5e5;
    border-bottom: 0;
  }
}
.node__header {
  display: flex;
  align-items: center;
  font-weight: bold;
  border: 1px solid #e5e5e5;
  border-bottom: 0;
  .label {
    padding-left: 22px;
  }
  span {
    font-weight: bold;
    line-height: $cell-height;
  }
}
.node__item {
  width: 100%;
  height: $cell-height;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.node__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 100%;
  width: 400px;
}
.node__id {
  width: 120px;
  flex: 0 0 120px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
}
.node__btns{
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px
}
.node__btn {
  // height: 20px;
  // line-height: 20px;
  // padding: 0 6px;
  font-size: 12px;
}
.btn__edit {
  margin-left: auto;
}
</style>
